<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 | 页面未找到</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-blue-50 min-h-screen flex flex-col items-center justify-center px-4 relative overflow-hidden">
    <!-- 装饰背景元素 -->
    <div class="absolute -top-20 -left-20 w-80 h-80 bg-primary/10 rounded-full filter blur-3xl"></div>
    <div class="absolute -bottom-40 -right-20 w-96 h-96 bg-secondary/10 rounded-full filter blur-3xl"></div>
    
    <!-- 404页面核心内容 -->
    <div class="relative z-10 flex flex-col items-center text-center">
        <!-- 404数字图形 -->
        <div class="relative mb-12">
            <h1 class="text-[clamp(8rem,20vw,15rem)] font-black leading-none text-gradient bg-gradient-to-r from-primary to-blue-400 mb-4">
                404
            </h1>
            
            <!-- 悬浮元素 -->
            <div class="absolute top-1/4 left-1/4 w-10 h-10 bg-white/30 rounded-full backdrop-blur-sm animate-float"></div>
            <div class="absolute bottom-1/3 right-1/4 w-16 h-16 bg-white/20 rounded-full backdrop-blur-sm animate-float" style="animation-delay: 1s"></div>
            <div class="absolute top-2/3 right-1/3 w-12 h-12 bg-white/20 rounded-full backdrop-blur-sm animate-float" style="animation-delay: 2s"></div>
        </div>
        
        <!-- 简短说明 -->
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6 text-shadow">页面未找到</h2>
        
        <!-- 返回按钮 -->
        <button class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full shadow-lg shadow-primary/20 transition-all duration-300 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-0.5 flex items-center gap-2 group">
            <i class="fa-solid fa-arrow-left group-hover:translate-x-[-5px] transition-transform duration-300"></i>
            <span>返回首页</span>
        </button>
    </div>
    
    <!-- 底部小信息 -->
    <div class="absolute bottom-6 left-0 right-0 text-center text-gray-500 text-sm">
        <p>© 2025 您的个人网站 | 页面不存在</p>
    </div>

    <script>
        // 按钮悬停动画
        document.querySelector('button').addEventListener('mouseenter', function() {
            this.classList.add('scale-105');
        });
        
        document.querySelector('button').addEventListener('mouseleave', function() {
            this.classList.remove('scale-105');
        });
        
        // 添加页面加载动画
        document.body.classList.add('opacity-0');
        window.addEventListener('load', function() {
            document.body.classList.add('transition-opacity', 'duration-700');
            document.body.classList.remove('opacity-0');
            document.body.classList.add('opacity-100');
        });
    </script>
</body>
</html>
    